<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    .cont{width: 1000px;overflow: hidden;}
    .cont .box{float: left;border: solid 1px black;width: 250px;box-sizing: border-box;text-align: center;}
    .cont .box img{width: 70%;}
    .cont .box p{line-height: 20px;height:40px;overflow: hidden;}
  </style>
</head>
<body>
  
</body>
<script>

  // var str = "<table border='1'>"
  // for(var i=0;i<5;i++){
  //   str += "<tr>";
  //   for(var j=0;j<10;j++){
  //     str += "<td>DATA</td>";
  //   }
  //   str += "</tr>";
  // }
  // str += "</table>";


  var goods = [{
    src:"https://img10.360buyimg.com/n7/jfs/t1/162258/36/39960/93359/64d60451Fd6112c16/aa411843e00e5287.jpg",
    price:"3999.00",
    name:"荣耀X50 第一代骁龙6芯片 1.5K超清护眼硬核曲屏 5800mAh超耐久大电池 5G 手机 8GB+128GB 雨后初晴"
  },{
    src:"https://img13.360buyimg.com/n7/jfs/t1/196701/21/35418/52632/64c7500dF4ec2f71d/61c8493f822d1718.jpg",
    price:"899.00",
    name:"Redmi Note 11 5G 天玑810 33W Pro快充 5000mAh大电池 8GB+ 128GB 神秘黑境"
  }];

  // 将来数据，都是从后端一键获取

  // 单双引号的字符不允许回车换行
  var str = '<div class="cont">';

  // 字符串拼接
  for(var i=0;i<goods.length;i++){
    str += '<div class="box"><img src="' + goods[i].src + '" alt=""><p>'+ goods[i].price +'</p><p>'+ goods[i].name +'</p></div>';
  }

  str += '</div>';
  
  // 如何使用拼接好的字符
  document.write(str);
</script>
</html>